<template>
  <view class="videoBox" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="videoContent">
      <view class="title" v-if="propsData.params.useTitle == 1">
        <moduleHeader
          :propsData="propsData"
          :moduleName="moduleName"
        ></moduleHeader>
      </view>
      <view class="video" @click="state = !state">
        <i class="iconfont icon-arrow-right-filling"></i>
        <image lazy-load :src="propsData.params.picUrl"></image>
      </view>
      <video
        :id="videoId"
        :style="[
          { height: state ? '100vh' : '0rpx', width: state ? '100vw' : '0rpx' },
        ]"
        @fullscreenchange="fullscreenchange"
        class="video"
        :src="propsData.params.videoUrl"
      ></video>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import moduleHeader from "../components/moduleHeader/index.vue";
export default {
  name: "diyVideo",
  components: {
    moduleHeader,
  },
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin],
  data() {
    return {
      VideoContext: {},
      state: false,
      videoId: "",
    };
  },
  created() {
    this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + "";
  },
  mounted() {
    this.VideoContext = uni.createVideoContext(this.videoId);
  },
  watch: {
    state(state) {
      if (!state) {
        this.VideoContext.pause();
      } else {
        this.VideoContext.play();
        this.$nextTick(() => {
          this.VideoContext.requestFullScreen({ direction: 0 });
        });
      }
    },
  },
  computed: {
    moduleName() {
      return this.propsData.params.text;
    },
  },
  methods: {
    fullscreenchange(e) {
      this.state = e.detail.fullScreen;
    },
  },
};
</script>

<style lang="scss" scoped>
.videoBox {
  width: 100%;
  padding: 24rpx;
  border-radius: 10rpx;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .videoContent {
    padding: 24rpx;
  }
  .title {
    width: 100%;
    margin-bottom: 24rpx;
    .name {
      font-size: 32rpx;
      font-weight: 600;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #888;
      i {
        font-size: 20rpx;
      }
    }
  }
  .video {
    width: 100%;
    height: 350rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    video {
      width: 100%;
      height: 100%;
    }
    .iconfont {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #fff;
      font-size: 100rpx;
      z-index: 1000;
      transform: translate(-50%, -50%);
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
